<template>
	<!-- :style="ctx.inputStyle" -->
	<el-form-item :prop="prop" :label="label">
		<el-input-tag v-bind="$attrs" :disabled="!isEdit" style="width: 100%;max-width: 100%;" clearable >
			<template #append v-if="append">
				<slot name="append" />
			</template>
		</el-input-tag>
	</el-form-item>
</template>

<script lang="ts" setup>
// InputTag 组件允许用户添加内容作为标签
defineOptions({
	name: 'MkInputTag'
})

const props = defineProps({
	prop: {
		type: String,
	},
	label: {
		type: String,
	},
	isEdit: {
		type: Boolean,
		default: true
	},
	append: { // 是否显示append
		type: Boolean,
		default: false
	},
	col: { // 控制宽度, 最多设置为3, 特殊情况可以设置为4
    type: Number,
    default: 1
  },
})
const ctx = reactive({
  inputStyle: {
    width: "", // 控制输入框部分的宽度, 不加!important时不起作用
  }
});
onMounted(() => {
  switch (props.col) {
    case 1:
      ctx.inputStyle.width = ""; //参考标准, 实际不起作用, 被element plus自带的样式覆盖了(含!important)
      break;
    case 2:
      ctx.inputStyle.width = '342px !important';
      break;
    case 3:
      ctx.inputStyle.width = '513px !important';
      break;
    case 4:
      ctx.inputStyle.width = '684px !important';
      break;
  }
})


</script>

<style lang='scss' scoped></style>